<template>
  <div>
    <pre>
        * v-text      是元素的innerText只能够在双标签中使用
        * v-html      是元素的innerHTML
        * v-if        元素是否移除或插入
        * v-show      元素是否显示或隐藏
        * v-model
    </pre>
    v-text
    <span v-text="text"></span>
    <input type="" name="">
    <hr />

    v-html:
    <span v-html="html"></span>
    <br />

    v-if:
    <div v-if="isShow" style="height:100px;background-color: red;"></div>
    <br/>

    v-show:
    <div v-show="isShow" style="height:100px;background-color:green;"></div>
    <hr/>

    v-model:
    <input type="text" name="" v-model="mTest">
    {{mTest}}
    <!-- 给下面的input的value赋值 使用、 v-bind:value="mTest" -->
    <input type="text" name="" v-bind:value="mTest" />

  </div>
</template>
<script>
  export default{
    data(){
       return {
         text: '我是v-text的数据',
         html:`
              <ul>
                <li>哈哈</li>
                <li>呵呵</li>
              </ul>
         `,
         isShow: true,
         mTest: 'hah'
       }
    }
  }
</script>
<style>

</style>